<!DOCTYPE HTML>
<html lang="zh-cn">
    <head>
        <title>{stl.sitename} | 用户中心</title>
        <stl:include file="/include/head.html"></stl:include>
        <link rel="stylesheet" type="text/css" href="/courseware/css/center.css" />
        <link rel="stylesheet" type="text/css" href="/courseware/css/icono.min.css" />
    </head>
    <body>
    <div class="container">
        <stl:include file="/include/header.html"></stl:include>

        <div class="content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-push-8 col-lg-push-8 hidden-xs">
                    <!--
                    <script>

                        $(function(){
                            $("#p-basic").addClass("active");
                            $("#p-basic").click(function(){
                                location.href = "/User/basic";
                            });
                            $("#p-avatar").click(function(){
                                location.href = "/User/avatar";
                            });
                            $("#p-account").click(function(){
                                location.href = "/User/account";
                            });
                             $("#p-return").click(function(){
                                location.href = "/User/";
                            });
                        })

                    </script>-->

                    <div class="section">
                        <div class="list-group sidebar-nav">
                            <ul class="menu" id="profile-sidebar">
                                <li id="p-return">返回个人主页<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span></li>
                                <li id="p-basic" class="active">基本资料</li>
                                <li class="hidden-xs" id="p-avatar">修改头像</li>
                                <li id="p-account">修改密码</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-pull-4 col-lg-pull-4">
                    
                    <div class="section section-card section-userinfo">
                        
                            <div id="user_avatar"></div>
                            <div id="user_summary">
                                <span id="username"></span>
                            </div>
                    </div>

                    <div class="section section-card section-settings">
                        <h4>我的学习</h4>
                        <div class="form-group">
                            <label for="studiedcoursewares">学习进度</label>
                            <div class="process">
                            <i id="flag" class="icon-flag"></i>
                            <div class="process-static"></div>
                            <div id="process-bar" class="process-active"></div>
                            </div>
                            <div>
                                <p>已参与学习 <span id="studiedcount" style="color: #f8c038; font-weight: bold;"></span> 门课程 / 共有 
                                <span id="allcount" style="color: #f8c038; font-weight: bold;"></span> 门课程</p>
                            </div>
                        </div>
                        
                    </div>

                    <div class="section section-card section-settings">
                        <h4>历史记录</h4>
                        <div class="form-group">
                            <ul id="histories">
                            </ul>    
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <stl:include file="/include/footer.html"></stl:include>
    <stl:include file="/include/bottom-bar.html"></stl:include>
    <stl:include file="/include/bottom.html"></stl:include>
    <script>
        $("#nav-index").removeClass('active');
        $("#nav-course").addClass('active');

        

        function initProcessBar(hasGet, totalGet) {
            var flag = document.getElementById('flag'),
            processBar = document.getElementById('process-bar'),
            widthPercentage = Math.round(hasGet/totalGet*100);
           
            if (widthPercentage >= 100) {
                widthPercentage = 100;
            }
            flag.style.left = (widthPercentage-1) + '%';
            processBar.style.width = widthPercentage + '%';
            if (widthPercentage == 0) {
                processBar.style.borderStyle = 'none';
            }
        }



        $(document).ready(function() {

            var _cookieName = 'xwsqxy_account';
            var _account = JSON.parse($.cookie(_cookieName));
            $("#username").text(_account.userName);
            
            var instance = axios.create({
              headers: {'X-SS-API-KEY': '8a0471e9-c527-4d57-99a1-6daec32bb629'}
            });
            
            
            
                ///eduonline/api/statistic/getcoursewaresofuser?userid=1
                instance.get('/eduonline/api/statistic/getcoursewaresofuser?userid=' + _account.id)
                    .then(function (response) {

                        var studiedcount = response.data.length;
                        var allcount = 440;

                        console.log(studiedcount);

                        initProcessBar(studiedcount, allcount);
                        $("#studiedcount").html(studiedcount);
                        $("#allcount").html(allcount);

                        $(response.data).each(function(index, item){
                            $("#histories").append("<li><div class=\"h_thumbnail\" style=\"background-image: url(\'" + item.ImageUrl.replace(/@/, "/courseware") + "\')\"></div><a href=\"/courseware/contents/" + item.ChannelId + "/" + item.CoursewareId + ".html\">" + item.CoursewareTitle + "</a></li>");
                        })

                        return false;

                    }).catch(function (error){

                        console.log(error);
                        
                    });

        })
    </script>
    </body>
</html>
